React Custom Hook State Machine: Освоение абстракции сложной логики состояния

По мере роста сложности React-приложений управление состоянием может стать серьезной проблемой. Традиционные подходы с использованием `useState` и `useEffect` могут быстро привести к запутанной логике и трудно поддерживаемому коду, особенно при работе со сложными переходами состояний и побочными эффектами. В этом случае на помощь приходят конечные автоматы, и в частности пользовательские хуки React, реализующие их. Эта статья проведет вас через концепцию конечных автоматов, продемонстрирует, как реализовать их в качестве пользовательских хуков в React, и покажет преимущества, которые они предлагают для создания масштабируемых и удобных в сопровождении приложений для глобальной аудитории.

Что такое конечный автомат?

Конечный автомат (или конечный автомат, FSM) — это математическая модель вычислений, которая описывает поведение системы, определяя конечное число состояний и переходы между этими состояниями. Думайте об этом как о блок-схеме, но с более строгими правилами и более формальным определением. Основные понятия включают:

• Состояния: Представляют различные условия или фазы системы.
• Переходы: Определяют, как система переходит из одного состояния в другое на основе конкретных событий или условий.
• События: Триггеры, вызывающие переходы состояний.
• Начальное состояние: Состояние, в котором система запускается.

Конечные автоматы превосходно моделируют системы с четко определенными состояниями и понятными переходами. Примеры изобилуют в реальных сценариях:

• Светофоры: Переключаются между состояниями, такими как Красный, Желтый, Зеленый, с переходами, запускаемыми таймерами. Это глобально узнаваемый пример.
• Обработка заказов: Заказ в электронной коммерции может переходить через состояния, такие как «В ожидании», «В обработке», «Отправлено» и «Доставлено». Это применимо ко всем онлайн-продажам.
• Процесс аутентификации: Процесс аутентификации пользователя может включать состояния «Вышел из системы», «Вход в систему», «Вошел в систему» и «Ошибка». Протоколы безопасности, как правило, соответствуют требованиям во всех странах.

Зачем использовать конечные автоматы в React?

Интеграция конечных автоматов в ваши компоненты React предлагает несколько убедительных преимуществ:

• Улучшенная организация кода: Конечные автоматы обеспечивают структурированный подход к управлению состоянием, делая ваш код более предсказуемым и понятным. Больше никакого кода-спагетти!
• Уменьшенная сложность: Явно определяя состояния и переходы, вы можете упростить сложную логику и избежать непреднамеренных побочных эффектов.
• Улучшенная тестируемость: Конечные автоматы по своей сути тестируемы. Вы можете легко проверить, что ваша система ведет себя правильно, тестируя каждое состояние и переход.
• Повышенная удобство сопровождения: Декларативный характер конечных автоматов упрощает изменение и расширение вашего кода по мере развития вашего приложения.
• Лучшая визуализация: Существуют инструменты, которые могут визуализировать конечные автоматы, предоставляя четкий обзор поведения вашей системы, помогая в сотрудничестве и понимании между командами с различными наборами навыков.

Реализация конечного автомата в качестве пользовательского хука React

Давайте проиллюстрируем, как реализовать конечный автомат с помощью пользовательского хука React. Мы создадим простой пример кнопки, которая может находиться в трех состояниях: `idle`, `loading` и `success`. Кнопка начинается в состоянии `idle`. При нажатии она переходит в состояние `loading`, имитирует процесс загрузки (с помощью `setTimeout`), а затем переходит в состояние `success`.

1. Определите конечный автомат

Во-первых, мы определяем состояния и переходы нашего автомата состояний кнопки:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Через 2 секунды перейти к успеху
      },
    },
    success: {},
  },
};

Эта конфигурация использует библиотечно-независимый (хотя и вдохновленный XState) подход для определения конечного автомата. Мы реализуем логику для интерпретации этого определения самостоятельно в пользовательском хуке. Свойство `initial` устанавливает начальное состояние в `idle`. Свойство `states` определяет возможные состояния (`idle`, `loading` и `success`) и их переходы. Состояние `idle` имеет свойство `on`, которое определяет переход в состояние `loading` при возникновении события `CLICK`. Состояние `loading` использует свойство `after` для автоматического перехода в состояние `success` через 2000 миллисекунд (2 секунды). Состояние `success` является терминальным состоянием в этом примере.

2. Создайте пользовательский хук

Теперь давайте создадим пользовательский хук, который реализует логику конечного автомата:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Очистка при размонтировании или изменении состояния
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Этот хук `useStateMachine` принимает определение конечного автомата в качестве аргумента. Он использует `useState` для управления текущим состоянием и контекстом (мы объясним контекст позже). Функция `transition` принимает событие в качестве аргумента и обновляет текущее состояние на основе определенных переходов в определении конечного автомата. Хук `useEffect` обрабатывает свойство `after`, устанавливая таймеры для автоматического перехода в следующее состояние по истечении указанной продолжительности. Хук возвращает текущее состояние, контекст и функцию `transition`.

3. Используйте пользовательский хук в компоненте

Наконец, давайте используем пользовательский хук в компоненте React:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Через 2 секунды перейти к успеху
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Этот компонент использует хук `useStateMachine` для управления состоянием кнопки. Функция `handleClick` отправляет событие `CLICK` при нажатии кнопки (и только если она находится в состоянии `idle`). Компонент отображает разный текст в зависимости от текущего состояния. Кнопка отключена во время загрузки, чтобы предотвратить множественные щелчки.

Обработка контекста в конечных автоматах

Во многих реальных сценариях конечные автоматы должны управлять данными, которые сохраняются во время переходов состояний. Эти данные называются контекстом. Контекст позволяет вам хранить и обновлять соответствующую информацию по мере продвижения конечного автомата.

Давайте расширим наш пример с кнопкой, чтобы включить счетчик, который увеличивается каждый раз, когда кнопка успешно загружается. Мы изменим определение конечного автомата и пользовательский хук для обработки контекста.

1. Обновите определение конечного автомата

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Мы добавили свойство `context` к определению конечного автомата с начальным значением `count`, равным 0. Мы также добавили действие `entry` в состояние `success`. Действие `entry` выполняется, когда конечный автомат входит в состояние `success`. Он принимает текущий контекст в качестве аргумента и возвращает новый контекст с увеличенным `count`. `entry` здесь показывает пример изменения контекста. Поскольку объекты Javascript передаются по ссылке, важно вернуть *новый* объект, а не изменять исходный.

2. Обновите пользовательский хук

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Очистка при размонтировании или изменении состояния
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Мы обновили хук `useStateMachine` для инициализации состояния `context` с помощью `stateMachineDefinition.context` или пустого объекта, если контекст не предоставлен. Мы также добавили `useEffect` для обработки действия `entry`. Когда текущее состояние имеет действие `entry`, мы выполняем его и обновляем контекст с возвращаемым значением.

3. Используйте обновленный хук в компоненте

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Теперь мы получаем доступ к `context.count` в компоненте и отображаем его. Каждый раз, когда кнопка успешно загружается, счетчик будет увеличиваться.

Расширенные концепции конечных автоматов

Хотя наш пример относительно прост, конечные автоматы могут обрабатывать гораздо более сложные сценарии. Вот некоторые расширенные концепции, которые следует учитывать:

• Стражи: Условия, которые должны быть выполнены для перехода. Например, переход может быть разрешен только в том случае, если пользователь прошел аутентификацию или если определенное значение данных превышает пороговое значение.
• Действия: Побочные эффекты, которые выполняются при входе или выходе из состояния. Это может включать вызовы API, обновление DOM или отправку событий другим компонентам.
• Параллельные состояния: Позволяют моделировать системы с несколькими одновременными действиями. Например, у видеоплеера может быть один конечный автомат для элементов управления воспроизведением (воспроизведение, пауза, остановка) и другой для управления качеством видео (низкое, среднее, высокое).
• Иерархические состояния: Позволяют вкладывать состояния в другие состояния, создавая иерархию состояний. Это может быть полезно для моделирования сложных систем со многими связанными состояниями.

Альтернативные библиотеки: XState и другие

Хотя наш пользовательский хук предоставляет базовую реализацию конечного автомата, существует несколько отличных библиотек, которые могут упростить процесс и предложить более расширенные функции.

XState

XState — популярная библиотека JavaScript для создания, интерпретации и выполнения конечных автоматов и диаграмм состояний. Она предоставляет мощный и гибкий API для определения сложных конечных автоматов, включая поддержку стражей, действий, параллельных состояний и иерархических состояний. XState также предлагает отличные инструменты для визуализации и отладки конечных автоматов.

Другие библиотеки

Другие варианты включают:

• Robot: Легкая библиотека управления состоянием с упором на простоту и производительность.
• react-automata: Библиотека, специально разработанная для интеграции конечных автоматов в компоненты React.

Выбор библиотеки зависит от конкретных потребностей вашего проекта. XState — хороший выбор для сложных конечных автоматов, а Robot и react-automata подходят для более простых сценариев.

Рекомендации по использованию конечных автоматов

Чтобы эффективно использовать конечные автоматы в своих React-приложениях, рассмотрите следующие рекомендации:

• Начните с малого: Начните с простых конечных автоматов и постепенно увеличивайте сложность по мере необходимости.
• Визуализируйте свой конечный автомат: Используйте инструменты визуализации, чтобы получить четкое представление о поведении вашего конечного автомата.
• Пишите всесторонние тесты: Тщательно протестируйте каждое состояние и переход, чтобы убедиться, что ваша система работает правильно.
• Документируйте свой конечный автомат: Четко документируйте состояния, переходы, стражи и действия вашего конечного автомата.
• Рассмотрите интернационализацию (i18n): Если ваше приложение ориентировано на глобальную аудиторию, убедитесь, что логика вашего конечного автомата и пользовательский интерфейс правильно интернационализированы. Например, используйте отдельные конечные автоматы или контекст для обработки различных форматов дат или символов валюты в зависимости от языкового стандарта пользователя.
• Доступность (a11y): Убедитесь, что ваши переходы состояний и обновления пользовательского интерфейса доступны для пользователей с ограниченными возможностями. Используйте атрибуты ARIA и семантический HTML, чтобы предоставить соответствующий контекст и обратную связь вспомогательным технологиям.

Заключение

Пользовательские хуки React в сочетании с конечными автоматами предоставляют мощный и эффективный подход к управлению сложной логикой состояния в приложениях React. Абстрагируя переходы состояний и побочные эффекты в хорошо определенную модель, вы можете улучшить организацию кода, уменьшить сложность, повысить тестируемость и повысить удобство сопровождения. Независимо от того, реализуете ли вы свой собственный пользовательский хук или используете такую библиотеку, как XState, включение конечных автоматов в ваш рабочий процесс React может значительно улучшить качество и масштабируемость ваших приложений для пользователей по всему миру.